<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <h1>axios基础使用</h1>
    <button id="btn">发送请求</button>
    <script>
        // axios是基于promise的HTTP库，可以用在浏览器和node.js
        // axios会返回一个promise实例

        // axios的请求配置对象
        // const btn = document.getElementById('btn')
        // btn.onclick = function(){
        //   const re =  axios({
        //     url:'/getmsg', // 必写项
        //     method:'get',//请求方式 如果不写默认请求方式为get 
        //     headers:{}, // 自定义请求头
        //     params : {
        //         userId:'001'
        //     }, //即将与请求一起发送的url参数，即查询字符串
        //     data:{},  // 请求体参数，只适用于post和put请求
        //     timeout:10000
        // })
        // console.log(re)  //返回一个成功的promise实例
        // }



        // 完整写法(和async,await使用)
        btn.onclick = async function () {

            try {
                throw new Error('出错啦')
                const result = await axios({
                    url: '/getmsg',
                    params: {
                        userId: '001'
                    },
                    headers: {}
                })
                console.log(result) 
                 //返回结果为promise成功的值 值为一个对象
                //  这个对象的属性包括config（配置），data（后台返回的数据），headers（响应头），ajax实例，响应状态码，响应状态码对应的字符串

                // console.log(result.data);


            } catch (e) {
                console.log(e);
            }

        }
    </script>
</body>

</html>